import React, { useCallback, useRef } from "react";
import { View, Text, Image } from "@tarojs/components";
import { observer } from "mobx-react";
import i18n from "i18n-js";
import { useLanguageStore } from "@/hooks";
import { DynamicColors, GStyleSheet } from "@/utils/DarkMode";
import FlexScrollView from "@/components/FlexScrollView";
import DeviceDataModel from '@/models/deviceData';
import ProductConfig, { getExperienceCenterList } from '@/config/product';

import PageContainer from "@/components/PageContainer";

const bgList = [
  'https://xbgroup-1251025085.cos.ap-guangzhou.myqcloud.com/cybertron/users/375869/media/img_cat_bg_1653384106490.png',
  'https://xbgroup-1251025085.cos.ap-guangzhou.myqcloud.com/cybertron/users/375869/media/img_fan_bg_1653384106492.png',
  'https://xbgroup-1251025085.cos.ap-guangzhou.myqcloud.com/cybertron/users/375869/media/img_heat_bg_1653384106527.png'
];


const dstyle = GStyleSheet.create({
  scroll: {
    padding: 20,
    boxSizing: 'border-box',
  },
  item: {
    justifyContent: 'space-between',
    padding: 20,
    borderRadius: 10,
    backgroundColor: DynamicColors.cardBackgroundColor,
    marginBottom: 20,
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover',
    backgroundPosition: '50% 50%',
  },
  text: {
    color: DynamicColors.titleTextColor,
    fontWeight: 500,
    fontSize: 20,
  },
  icon: {
    width: 80,
    height: 80,
  }
});


const ExperienceCenter: React.FC = () => {
  const { key } = useLanguageStore();
  const productListRef = useRef(getExperienceCenterList().map(i => ({ ...i, displayName: ProductConfig.getProductNameFromConfig(key, i, true) })).sort((a, b) => a.displayName.localeCompare(b.displayName)));
  const styles = dstyle.useDynamicStyle();

  const goToDevicePage = useCallback((p) => {
    DeviceDataModel.goToVirtualDeviceDetailPage(p);
  }, []);

  return (
    <PageContainer title={i18n.t('EXPERIENCE_CENTER')} >
      <View style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        <FlexScrollView id='experienceCenterList' scrollStyle={styles.scroll}>
          {productListRef.current.map((p, index) => {
            return (
              <View className='centerFlex' style={{ ...styles.item, backgroundImage: `url(${bgList[index % 3]})` }} key={p.productKey} onClick={() => { goToDevicePage(p) }} id={p.wxTemplateId ? `_${p.wxTemplateId.replace(/\./g, '_')}` : ''}>
                <Text style={styles.text}>{p.displayName}</Text>
                <Image style={styles.icon} src={p.icon} mode='aspectFit' />
              </View>
            )
          })}
        </FlexScrollView>
      </View>
    </PageContainer>
  );
}

export default observer(ExperienceCenter);
